<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <!--<script src="js/echarts.min.js"></script>-->
    <script src="js/echarts-all.js"></script>
    <script src="js/jquery-1.8.2.min.js"></script>
</head>
<body>

<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    var oriData = [];
    $.get('rainfall.json').done(function (data) {
        // 填入数据
        console.log(data.categories);
        myChart.setOption({
            xAxis: {

                data: data.categories
            },
            series: [{
                name: '流量',
                data: data.series[0].data
            },
                {
                    name: '降雨量',
                    data: oriData = data.series[1].data
                }]
        })
    });


    $.get('rainfall.json').done(function(data){
        myChart.setOption({
            title: {
                text: '雨量流量关系图',
                subtext: '数据来自西安兰特水电测控技术有限公司',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    return params[0].name + '<br/>'
                        + params[0].seriesName + ' : ' + params[0].value + ' (m^3/s)<br/>'
                        + params[1].seriesName + ' : ' + -params[1].value + ' (mm)';
                }
            },
            legend: {
                data: ['流量', '降雨量'],
                x: 'left'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            dataZoom: {
                show: true,
                realtime: true,
                start: 0,
                end: 100
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {onZero: false},
                    data: []
                }
            ],
            yAxis: [
                {
                    name: '流量(m^3/s)',
                    type: 'value',
                    max: 500
                },
                {
                    name: '降雨量(mm)',
                    type: 'value',
                    axisLabel: {
                        formatter: function (v) {
                            return -v;
                        }
                    }
                }
            ],
            series: [
                {
                    name: '流量',
                    type: 'line',
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data: []
                },
                {
                    name: '降雨量',
                    type: 'line',
                    yAxisIndex: 1,
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data: (function () {
                        var len = oriData.length;
                        while (len--) {
                            oriData[len] *= -1;
                        }
                        return oriData;
                    })()
                }
            ]


        });
    })

    // 异步加载数据

</script>
</body>

</html>
